<template>

        <el-autocomplete
          v-model="state1"
          :fetch-suggestions="querySearch"
          clearable
          
          class="inline-input w-50"
          placeholder="Please Input"
          @select="handleSelect"
        />
        <!--:trigger-on-focus="false"有焦点是否触发搜索-->

  </template>
  
  <script  setup>
  import {  ref } from 'vue'
 import $axios from "../../utils/axios"
  
  const state1 = ref('')

  

  /**
   * 
   * @param {*} queryString 文本框中的值
   * @param {*} cb 
   */
  const querySearch = (queryString, cb) => {
    //解决第一次获得焦点输入值为空的问题：
    queryString=queryString?queryString:'*'//*代表查找全部
    // 使用path携带数据
    const path ='/emp/q/job/bypre/'+queryString;
    // 不要使用同步请求，会出事
    $axios.get(path)
    .then((response)=>{ 
        const results=response.data.result;
        // 要求的是对象，但返回的是数组，靠这个转成一个对象
        console.log(results.map((v)=>({
                value:v
            })
            )
            );
        cb(
            results.map((v)=>({
                value:v
            }))
    )})
    .catch((error)=>{
        console.log(error);
        // 如果未填充，则组件一直挂起
        cb([])
    })
  }
  const handleSelect = (item) => {
    console.log(item)
  }

  </script>
  